<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/common.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="rolename" label="角色名称" width="180">
            </el-table-column>
            <el-table-column prop="description" label="角色部门" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini" type="primary" @click="add">增加</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="uprole(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="warning" size="mini" @click="uprolemenu(scope.$index, scope.row)">角色菜单</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer title="角色菜单维护" :visible.sync="drawer">
            &nbsp;&nbsp;&nbsp;
            <el-button type="primary" size="mini" @click="uprolemenusubimt">确定修改角色菜单</el-button>
            <el-tree @check="trchange" ref="tree" :data="treedata" :check-strictly="true" show-checkbox
                default-expand-all node-key="id" highlight-current>
            </el-tree>
            <!-- {{treedata}} -->
        </el-drawer>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            tableData: [],
            drawer: false,//控制角色菜单维护的抽屉
            treedata: [],
            nowroleid: 0,//当前要修改的角色id
        },
        methods: {
            initTableData() {
                let that = this
                axios.get(API + "boot/selectRole").then(function (res) {
                    that.tableData = res.data.data.rolelist
                }).catch(err => {
                    console.log(err)
                });
            }, add() {

            }, uprole() {

            }, uprolemenusubimt() {
                let treeNowArr = this.$refs.tree.getCheckedKeys()//获取树当前选中的节点
                let that = this
                axios.post(API + "boot/updateRoleMenuId", {
                    roleid: this.nowroleid,
                    listMenu: treeNowArr
                }).then(function (res) {
                    if (res.data.success) { // 假设服务器端返回的数据结构中有success字段
                that.$message({
                    message: '修改成功',
                    type: 'success'
                });
                that.drawer = false; // 关闭抽屉
                
                // 可选：刷新表格数据或进行其他操作
                that.initTableData();
            } else {
                that.$message.error('修改失败，请稍后再试');
            }
                    }).catch(err => {
                        console.log(err)
                    });
            },
            trchange(a, b) {
                console.log(a.children)
                let treeNowArr = this.$refs.tree.getCheckedKeys()//获取树当前选中的节点
                treeNowArr.push(a.parentid)
                console.log(treeNowArr)
               if (a.children!=null) {
                   const childrenArr=a.children.map((obj) => obj.id)
                   console.log(childrenArr)
                   treeNowArr=treeNowArr.filter(item => !childrenArr.includes(item));
               }
               this.$refs.tree.setCheckedKeys(treeNowArr);
            },
            uprolemenu(i, row) {
                this.nowroleid = row.id//设置当前要修改的角色id
                this.initTreeData()
                let that = this
                axios.get(API + "boot/selectRoleMenuByRoleId/" + row.id).
                    then(function (res) {
                        let slist = res.data.data.rolemenuList
                        const arr = slist.map((obj) => obj.menuid)
                        this.$refs.tree.setCheckedKeys(arr);
                    }).catch(err => {
                        console.log(err)
                    });

                this.drawer = true
            },
            initTreeData() {
                let that = this
                axios.get(API + "boot/selectMenu").
                    then(function (res) {
                        let s = arrayToTree(res.data.data.menuList)
                        that.treedata = s


                    }).catch(err => {
                        console.log(err)
                    });
            }
        }, mounted() {
            this.initTableData();
        }
    })
</script>

</html>